import * as THREE from 'three';
// console.log(THREE);


// 引入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 引入动画库
import  gsap from 'gsap';
import { Camera } from 'three';

//  1.创建场景
const scene = new THREE.Scene()



//  2.创建并添加相机
/* PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面 */
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)  //创建相机
/* position.set ( x : Float, y : Float, z : Float ) : this
设置该向量的x、y 和 z 分量。 */
camera.position.set(0,0,10) //设置相机位置
scene.add(camera)//在场景中添加相机


// 14 纹理与材质   纹理常用属性 显示算法 纹理材质的透明
// 导入纹理 通过图片加载
const textureLoader = new THREE.TextureLoader();
const wenliColorTexture = textureLoader.load(require('../assets/imgs/textures/123.png'));//纹理加载器
// 纹理常用属性
// wenliColorTexture.offset.set(0.5,0.5);//偏移
// wenliColorTexture.rotation = Math.PI/4;///旋转45°
// wenliColorTexture.center.set(0.5,0.5);///旋转原点 默认(0,0)
// wenliColorTexture.repeat.set(2,3);///重复次数
// wenliColorTexture.wrapS = THREE.MirroredRepeatWrapping;///重复模式  水平方向  镜像重复
// wenliColorTexture.wrapT = THREE.RepeatWrapping;///重复模式  垂直方向  无限重复

// 纹理的显示算法
// wenliColorTexture.minFilter = THREE.NearestFilter;//一纹素小于一像素时，贴图如何采样
// wenliColorTexture.magFilter = THREE.NearestFilter;//一纹素大于一像素时，贴图如何采样
// wenliColorTexture.minFilter = THREE.LinearFilter;//默认值
// wenliColorTexture.magFilter = THREE.LinearFilter;//默认值

// 纹理的透明
const wenliAplhaTexture = textureLoader.load(require('../assets/imgs/alphaMap/alphaMap.png'));//纹理加载器加载不透明度灰阶图片

// 纹理的环境遮挡
const wenliAoTexture = textureLoader.load(require('../assets/imgs/textures/123.png'));//纹理加载器

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
//材质
const BasicMaterial = new THREE.MeshBasicMaterial({
    color:'#ffff00',
    map:wenliColorTexture,
    alphaMap:wenliAplhaTexture,//控制表面透明度(黑色完全透明 白色完全不透明  灰阶代表不透明度)
    transparent:true,//允许透明
    aoMap:wenliAoTexture,//环境遮挡贴图
})
const cube = new THREE.Mesh( cubeGeometry, BasicMaterial );// 将几何体和材质组合为物体
scene.add( cube );//在场景中添加物体


//  4.设置渲染器并渲染场景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.setSize(window.innerWidth,window.innerHeight)  //设置渲染的尺寸大小
document.body.appendChild(renderer.domElement);// 将webgl渲染的内容添加到body
// renderer.render(scene,camera) // 使用渲染器，通过相机将场景渲染进来 


// 5.添加辅助坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// 6.添加控制器-轨道控制器 可以使得相机围绕目标进行轨道运动  通过不断地重新渲染来实现移动视角的效果
const controls = new OrbitControls(camera,renderer.domElement);
// 10.设置控制器阻尼 更真实  需要在每一帧重新生成时调用controls.update();
controls.enableDamping = true;



window.addEventListener("dblclick",()=>{//双击屏幕全屏/取消全屏
    document.fullscreenElement?document.exitFullscreen():renderer.domElement.requestFullscreen()
})

function render(){//递归实现每一帧的重新渲染
    //  8.制作动画  ——  时间动画原理(通过每一帧的生成时间为基准来渲染动画  clock函数或render自带时间参数)  较简单 略...  
    renderer.render(scene,camera)
    requestAnimationFrame(render);
    controls.update();
}
render();

// 11.监听画面变化渲染画面  
window.addEventListener('resize',()=>{
    camera.aspect = window.innerWidth/window.innerHeight//更新相机
    camera.updateProjectionMatrix();//更新相机投影矩阵
    renderer.setSize(window.innerWidth,window.innerHeight)//更新渲染器尺寸大小
    renderer.setPixelRatio(window.devicePixelRatio)//设置渲染器像素比————就是缩放比
})